<template>
  <el-dialog
    title="修改密码"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    width="1000px"
    @close="close"
    :close-on-click-modal="false"
    center
  >
    <div class="custom-panelwe">
      <el-form
        ref="form"
        :inline-message="false"
        :rules="rules"
        :status-icon="true"
        :model="formData"
        label-width="160px"
        size="large"
        :hide-required-asterisk="true"
        class="ser-form ope-form"
        v-loading="loading"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="原密码:" prop="originalPassword">
              <el-input
                type="password"
                auto-complete="off"
                v-model.trim="formData.originalPassword"
                placeholder="请输入原密码"
                onpaste="return false"
                onselectstart="return false"
                v-filterSpecialChar
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="warn-info mark ml-30"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="新密码:" prop="passWord">
              <el-input
                type="password"
                auto-complete="off"
                v-model.trim="formData.passWord"
                placeholder="请输入新密码"
                onpaste="return false"
                onselectstart="return false"
                v-filterSpecialChar
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="warn-info mark ml-30 lineheight">
              8-32个字符，至少包含大小写字母、数字、特殊字符支持(`~!@#$%^&*()-_=+\|[{}];:'",<.>/?)中的任两种
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="确认密码:" prop="verifyPassword">
              <el-input
                type="password"
                auto-complete="off"
                v-model.trim="formData.verifyPassword"
                placeholder="请输入确认密码"
                onpaste="return false"
                onselectstart="return false"
                v-filterSpecialChar
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="warn-info mark ml-30"></div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button  @click="save" type="primary" >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { validateloginPass } from '@/util/customRules';
export default {
  name: 'headerpassword',
  data() {
    return {
      dialogVisible: false,
      formData: {
        originalPassword: '',
        passWord: '',
        verifyPassword: '',
      },
      rules: {
        originalPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        passWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入新密码'));
              } else if (value == this.formData.originalPassword) {
                callback(new Error('新密码与旧密码不能一致!'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        verifyPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.passWord) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          }, trigger: 'blur' },
        ],
      },
      loading: false,
    };
  },
  props: {
    // params: {
    //   type: Object,
    //   default: {}
    // }
  },
  computed: {
    loginInfo() {
      return this.$store.getters.getLoginInfo;
    },
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    show(options) {
      this.dialogVisible = true;
    },
    // 确定
    save(call) {
      // const param = {
      //   pwdOld: (this.formData.originalPassword),
      //   pwdNew: (this.formData.passWord),
      //   id: this.loginInfo.id,
      // };
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          this.loading = true;
          this.$axiosInstance({
            url: 'changUserPass',
            method: 'get',
            params: {
              ...this.formData
            }
          }).then((res) => {
            this.loading = false;
            let { data, code, message } = res.data;
            if (code === 200) {
              this.$message({
                message,
                type: 'success',
                onClose: () => {
                  this.dialogVisible = false;
                },
              });
            } else {
              this.$message({
                message,
                type: 'error',
              });
            }
          })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.custom-panelwe {
  width: 100%;
}
</style>
